import {Component} from 'react';

import {Table, Select} from 'antd';

let authTool  = require('../../tools/auth-tool');
let trustyTool  = require('../../tools/trusty-tool');


import {connect} from 'dva';

const mapStateToProps = (state) => {
  const {loading, projectList}  = state['project'];
  return {
    loading:loading,
    projectList:projectList
  }
}


const mapDispatchToProps  = (dispatch) => {

  return {
    onDidMount:()=>{
      dispatch({
        type:'project/queryTrustyLibraryInfos'
      });

      dispatch({
        type:'project/queryPageTrusty', payload:{pageSize:2, currentPage:1}
      })
    },
    queryPageTrusty:(pageSize, current)=>{
      dispatch({
        type:'project/queryPageTrusty', payload:{pageSize:pageSize, currentPage:current}
      });
    }
  }
}


class Reception extends Component {

  componentDidMount(){
    this.props.onDidMount();
  }

  handleTableChange = (pagination, filters, sorter) =>{
    console.log('Pagination:', pagination);
    const {pageSize, current}  = pagination;
    this.props.queryPageTrusty(pageSize, current);

  }

  handlePaginationChange = (page, pageSize) => {
    console.log('Pagination changed', page, pageSize);

  }

  worthColumnRender = (text) => {
    return(
      <Select
        style={{'width':100}}
        defaultValue={text.toString()}
        >
        <Select.Option key='0'> 价值较低 </Select.Option>
        <Select.Option key='1'> 价值一般 </Select.Option>
        <Select.Option key='2'> 价值较高 </Select.Option>
      </Select>
    )
  };

  intentionColumnRender = (text) => {

    return(
      <Select
        style={{'width':100}}
        defaultValue={text.toString()}
        >
        <Select.Option key='0'>  </Select.Option>
        <Select.Option key='1'> 意愿较弱 </Select.Option>
        <Select.Option key='2'> 意愿一般 </Select.Option>
        <Select.Option key='3'> 意愿强烈 </Select.Option>
      </Select>
    )
  };

  trusyColumnRender = (text, record) => {
    console.log('Trusty render');

    let options  = [];
    let defaultValue = [];

    const trustyLib  = trustyTool.getTrustyLibrary();
    for(let i =0; i < trustyLib.length; i++){
      let info  = trustyLib[i];
      options.push(
        <Select.Option key={info.userId} > {info.nickName} </Select.Option>
      );
    }

    const projectId  = record.projectId;
    const trustyIdList  = trustyTool.getTrustyIdListOfProject(projectId);
  //  const trustyIdList  = record.trustyIdList;
    console.log('Render trusty id list', record.trustyIdList);

    if( trustyIdList && trustyIdList.length ){
        for(let id of trustyIdList){
          defaultValue.push(id.toString());
        }
    }

    return (
      <Select
        style={{'width':160}}
        mode='multiple'
        size='small'
        placeholder='点击选择'
        defaultValue={defaultValue}

        >
        {options}
      </Select>
    )
  };

  render(){
    console.log('Reception render');
    const projectList  = this.props.projectList;
    return(
      <div>
        <Table dataSource={projectList}
          loading={this.props.loading}
          rowKey='projectId'
          pagination={{
            pageSize:2,
            showSizeChanger:true,
            onChange:this.handlePaginationChange
          }}
          onChange={this.handleTableChange}
          >
          <Table.Column title="编号" dataIndex="projectId" key="projectId"/>
          <Table.Column title='客户' dataIndex="customer" key="customer"/>
          <Table.Column title='产品' dataIndex="production" key="production"/>
          <Table.Column title='地域' dataIndex='region' key="region" />
          <Table.Column title='联系人' dataIndex="linkman" key="linkman"  />
          <Table.Column title='手机' dataIndex="phone" key="phone" />
          {
             authTool.hasRole('admin') &&
             <Table.Column title='负责人' dataIndex='projectId' key="trusty" render={this.trusyColumnRender}/>
          }

          <Table.Column title='价值' dataIndex='state' key="worth" render={this.worthColumnRender}/>
          <Table.Column title='意愿' dataIndex='state' key="intention" render={this.intentionColumnRender}/>
        </Table>
      </div>

    )
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(Reception)
